<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/WdatePicker.js">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <button class="btn btn-primary" id="addStudent"> +  新增学生</button>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>籍贯</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-wrap">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinDate"></td>
                    <td>
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="mask"></div>
        <div id="pop">
            <h2>添加学生</h2>


            <div class="form-horizontal">
                <div class="form-group">
                    <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="data-name" placeholder="请输入学生姓名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="data-age" class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" id="data-age" placeholder="请输入年龄">
                    </div>
                </div>

                <div class="form-group">
                    <label for="data-age" class="col-sm-2 control-label">性别</label> &nbsp;&nbsp;&nbsp;
                    <label class="radio-inline">
                        <input type="radio" name="sex" checked>男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" id="data-female">女
                    </label>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">籍贯</label> &nbsp;&nbsp;&nbsp;
                    <select name="" id="province"></select>
                    <select name="" id="city"></select>
                    <select name="" id="area"></select>
                </div>


                <div class="form-group">
                    <label class="col-sm-2 control-label">入学日期</label>
                    <div class="col-sm-10">
                        <input type="input" class="form-control" id="data-joinDate" onclick=WdatePicker(); placeholder="入学日期">
                    </div>
                </div>

                <div class="form-group" style="float:right;margin-top:20px;">
                    <button id="submit" class="btn btn-primary">确认添加</button>
                    <button id="cancel" class="btn btn-default">取消</button>
                </div>
            </div>

        </div>
    </div>
    <script src="lib/citys.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/datepicker/WdatePicker.js"></script>

    <script>
        let address = "http://10.35.170.88:8883"
        let template = $("#template");
        $.ajax({

                url: `${address}/getStudentList`,
                success(data) {
                    // let studentList = JSON.parse(data);
                    let tbody = $(".data-wrap");
                    data.forEach(item => {
                        let newItem = template.clone(true).attr("id", "");
                        newItem.find(".data-id").html(item.id)
                        newItem.find(".data-name").html(item.name)
                        newItem.find(".data-age").html(item.age)
                        newItem.find(".data-sex").html(item.sex ? "男" : "女")
                        newItem.find(".data-city").html(item.city)
                        newItem.find(".data-joinDate").html(item.joinDate)
                        newItem.appendTo(tbody)
                    })
                }
            })
            // 删除请求
        template.find(".data-delete").click(function() {
                let nowItem = $(this).closest("tr");
                if (confirm(`真的要删除${nowItem.find(".data-name").html()}同学吗？此项操作不可逆！`)) {

                    $.ajax({
                        url: `${address}/deleteStudent`,
                        data: {
                            id: $(this).closest("tr").find(".data-id").html()
                        },
                        success(data) {
                            if (data === "success") {
                                nowItem.fadeOut();
                            } else {
                                alert("删除失败");
                            }
                        }
                    })

                }
            })
            // 编辑请求

        template.find(".data-edit").click(function() {




                    // 添加请求
                    $("#submit").click(function() {
                        if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")) {
                            $.ajax({
                                url: `${address}/addStudent`,
                                data: {
                                    name: $("#data-name").val(),
                                    age: $("#data-age").val(),
                                    sex: $("#data-female")[0].checked ? 0 : 1,
                                    city: $("#province").val() + $("#city").val() + $("#area").val(),
                                    joinDate: $("#data-joinDate").val(),
                                },
                                success(data) {
                                    if (data === "success") {
                                        history.go(0)
                                    } else {
                                        alert("操作失败")
                                    }
                                }
                            })
                        }
                    })

                    window.onkeydown = function(event) {
                        if (event.keyCode === 13) {
                            $("#submit").click()
                        }
                        if (event.keyCode === 27) {
                            $("#cancel").click()
                        }
                    }

                    // 新增学生显示弹出层
                    $("#addStudent").click(function() {
                        $("#mask").fadeIn();
                        $("#pop").fadeIn();
                        $("#data-name").focus()
                    })
                    $("#cancel").click(function() {
                        $("#mask").fadeOut("fast");
                        $("#pop").fadeOut("fast");
                    })

                    $("#data-joinDate").click(function() {
                        WdatePicker();
                    })
    </script>

</body>

</html>